<template>
    <div class="page-content">
        <div class="comm-content" ref="box">种植面积</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            myEcharts: null
        }
    },
    destroyed() {
        window.removeEventListener('reset', this.screen)
    },
    computed: {
        themeStatus() {
            return this.$store.state.theme
        }
    },
    watch: {
        themeStatus() {
            console.log(this.$store.state.theme);
            this.myEcharts.dispose()
            this.initEcharts()
            this.screen()
        }
    },
    async mounted() {
        this.initEcharts()

    },
    methods: {
        async initEcharts() {

            window.addEventListener("resize", this.screen)
            let box = this.$refs.box
            this.myEcharts = this.$echarts.init(box, this.themeStatus)
            let dataList = await this.$http("/TotalAreaCropsProportion")
            console.log(dataList);

            let options = {
                title: {
                    text: "种植农作物面积统计",//标题内容
                    top: 10,
                    left: 10,

                },
                // 滑入显示详情
                tooltip: {

                    // trigger: 'axis',
                    axisPointer: {
                        // type: 'cross',
                        crossStyle: {
                            color: '#999'
                        },
                        lineStyle: {
                            type: 'dashed'
                        }
                    }
                },
                // 小块上面的提示块
                legend: {
                    // orient: 'horizontal',
                    show: true,
                    right: 30,
                    top: 40,
                    left: 0,
                    padding: [20, 20, 20, 20],

                },

                series: [

                    {

                        type: 'pie', //type为pie，表示图表为饼图
                        center: ['50%', '60%'],
                        radius: "60%",
                        label: {
                            show: false,
                            normal: {
                                textStyle: {
                                    fontSize: 13		// 提示文字大小
                                }
                            }
                        },
                        labelLine: {//指示线样式设置
                            show: true,
                            length: 20//第一段指示线的长度
                        },

                        data: dataList.data

                    }

                ]
            };
            this.myEcharts.setOption(options)
        },
        screen() {
            this.myEcharts.resize()
            //计算一个文字大小比例
            let width = this.$refs.box.offsetWidth
            let num = width / 100 * 5
            let options = {
                title: {
                    textStyle: {
                        //设置主题样式
                        fontSize: num
                    }
                }
            }
            //修改之后要重绘
            this.myEcharts.setOption(options)
        },
    }

}
</script>
<style scoped></style>